<script lang="ts" name="person-new" setup>
import {ref, watch} from 'vue'

//数据
let sum = ref(0)


//方法
function changeSum () {
  sum.value += 1
}

//监视
// 情况一: 监视[ref]定义的[基本类型数据]..watch(谁? 回调函数(新值,旧值))//监视数据不需要写value,因为监视的是ref定义的数据,
const stopWatch =  watch(sum, (newValue,oldValue) => {
  console.log('sum变化了',newValue,oldValue)
  if(newValue >= 10) {
    stopWatch()
  }
})
</script>

<template>
  <div class="person">
    <h1>情况一: 监视[ref]定义的[基本类型数据]</h1>
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>